<script>
    import moment from "moment";
    import {config, format, getRandomInt, playTone} from "$lib/shared.js";
    import HalfCycleProgress from "./HalfCycleProgress.svelte";

    let currentTime = $state(moment());
    // 当前时间刷新
    $effect(() => {
        const id = setInterval(() => {
            currentTime = moment();
        }, 500);
        return () => {
            clearInterval(id);
        }
    });

    let focusDuration = config.focus_duration;
    let longBreak = config.long_break.duration;
    let paused = $state(false);
    let started = $state(false);
    let elapsedSeconds = $state(0);
    let remainingTime = $derived(focusDuration - elapsedSeconds);
    let isLongRest = $state(false);
    let longRestRemain = $derived(focusDuration + longBreak - elapsedSeconds);
    let isPlayed = $state(false);
    $effect(() => {
        // 定时器
        let id = 0;
        if (!started) {
            elapsedSeconds = 0;
            clearInterval(id);
        } else {
            id = setInterval(() => {
                elapsedSeconds++;
            }, 1000);
            if (paused) {
                clearInterval(id);
            }
        }
        isLongRest = remainingTime < 0 && elapsedSeconds <= (focusDuration + longBreak);
        // 处理时间
        if (isLongRest && !isPlayed) {
            isPlayed = true;
            console.log("isLongRest", elapsedSeconds);
            playTone(config.long_break.tone)
        }
        // 休息结束,重新开始
        if (longRestRemain < 0) {
            playTone(config.long_break.tone)
            elapsedSeconds = 0;
            isLongRest = false;
        }

        return () => {
            clearInterval(id);
        }
    });

    // 短休息逻辑
    function getNewTriggerTime(start, duration, end) {
        return start + duration >= end ? end : start + duration;
    }

    function getNextWaitTime() {
        return getRandomInt(config.short_break.trigger_range.start, config.short_break.trigger_range.end);
    }

    let triggerTime = getNewTriggerTime(elapsedSeconds, getNextWaitTime(), focusDuration);
    $effect(() => {
        // 每隔3-5分钟随机出发短休息,休息10s后继续工作
        if (triggerTime === elapsedSeconds) {
            // play
            playTone(config.short_break.tone)
            console.log("triggerTime", triggerTime, elapsedSeconds)
        }
        if (triggerTime + 10 === elapsedSeconds) {
            playTone(config.short_break.tone)
            console.log("triggerTime + 10", triggerTime, elapsedSeconds)
            triggerTime = getNewTriggerTime(elapsedSeconds, getNextWaitTime(), focusDuration);
        }
        if (elapsedSeconds === focusDuration) {
            console.log("focusDuration", triggerTime, elapsedSeconds)
        }
    })
</script>

<main class="container">
    <h1>当前时间: {currentTime.format("YYYY-MM-DD HH:mm:ss")}</h1>
    <div class="row  arc-time">
        <HalfCycleProgress radius="80"
                           text={isLongRest? "休息:" + format(longRestRemain) :format(remainingTime)}
                           progress={isLongRest ? (longBreak-longRestRemain) / longBreak :elapsedSeconds / focusDuration}/>
    </div>
    <p>
        {#if !started}
            <button onclick={() =>{started=true;paused=false;}}>开始</button>
        {:else }
            {#if (paused)}
                <button onclick={() =>{paused=false;}}>继续</button>
            {:else if (started)}
                <button onclick={() =>{paused=true;}}>暂停</button>
            {/if}
            <button onclick={() =>{started=false; paused=true;}}>结束</button>
        {/if}
    </p>
</main>

<style>

    :root {
        font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;

        color: #0f0f0f;
        background-color: #f6f6f6;

        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
    }

    .container {
        margin: 0;
        padding-top: 10vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .row {
        display: flex;
        justify-content: center;
    }

    a {
        font-weight: 500;
        color: #646cff;
        text-decoration: inherit;
    }

    h1 {
        text-align: center;
    }

    button {
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0.6em 1.2em;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        color: #0f0f0f;
        background-color: #ffffff;
        transition: border-color 0.25s;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }

    button {
        cursor: pointer;
    }

    button:hover {
        border-color: #396cd8;
    }

    button:active {
        border-color: #396cd8;
        background-color: #e8e8e8;
    }

    button {
        outline: none;
    }


</style>
